<template>
    <div id="salesAdd">
        <h2>新增销售员</h2>
        <div class="addSales">
            <el-form ref="newSale" :model="newSale" label-width="150px">
                <el-form-item label="销售员账号：">
                    <el-input v-model="newSale.username"></el-input>
                </el-form-item>
                <el-form-item label="销售员密码：">
                    <el-input v-model="newSale.password"></el-input>
                </el-form-item>
                <el-form-item label="销售员姓名：">
                    <el-input v-model="newSale.name"></el-input>
                </el-form-item>
                <el-form-item label="销售员年龄：">
                    <el-input v-model="newSale.age"></el-input>
                </el-form-item>
                <el-form-item label="销售员性别:">
                    <el-radio-group v-model="newSale.gender">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="销售员联系方式：">
                    <el-input v-model="newSale.phone"></el-input>
                </el-form-item>
                <el-form-item label="销售员头像：">
                    <input type="file" @change="uploadImages" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addSales"
                        >确认新增</el-button
                    >
                </el-form-item>
            </el-form>
            <div class="photo">
                <p>头像区域</p>
                <div class="area" v-if="!newSale.headSculpture"></div>
                <img
                    :src="'http://localhost:3000/temp/' + newSale.headSculpture"
                    alt=""
                    v-if="newSale.headSculpture"
                />
            </div>
        </div>
    </div>
</template>

<script>
import axios from "../../../http/axios.js";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("salesManage");
export default {
    computed: {
        ...mapState(["newSale"]),
    },
    methods: {
        ...mapActions(["addSales"]),
        async uploadImages(event) {
            // 获取图片信息
            const files = event.target.files;
            const formData = new FormData();
            formData.append("file", files[0]);
            const { data } = await axios({
                url: "/images/updateImages",
                method: "post",
                data: formData,
            });
            if (data.code) {
                this.newSale.headSculpture = data.data;
            } else {
                this.newSale.headSculpture = "";
            }
        },
    },
};
</script>

<style lang="scss">
#salesAdd {
    padding-left: 20px;
    & > h2 {
        padding-left: 10px;
        margin-bottom: 20px;
        height: 50px;
        line-height: 50px;
        text-align: left;
        border-bottom: 1px solid lightGray;
    }
    .addSales {
        display: flex;
        .el-form {
            .el-form-item {
                text-align: left;
                .el-input {
                    width: 300px;
                    .el-input__inner {
                        width: 300px;
                    }
                }
            }
        }
        .photo {
            margin-left: 100px;
            margin-top: 60px;
            img {
                width: 200px;
                height: 200px;
            }
            p {
                margin-bottom: 20px;
                color: #606266;
            }
            .area {
                width: 200px;
                height: 200px;
                border: 1px dashed #606266;
            }
        }
    }
}
</style>